<template>
  <div class="main cardcho">
    <div class="item">
      <div class="card" @click="choCard(0)">
        <h4>{{ this.cardList[0].name }}</h4>
      </div>
      <div class="blank"></div>
      <div class="card" @click="choCard(1)">
        <h4>{{ this.cardList[1].name }}</h4>
      </div>
    </div>
    <div class="item">
      <div class="card" @click="choCard(2)">
        <h4>{{ this.cardList[2].name }}</h4>
      </div>
      <div class="blank"></div>
      <div class="card" @click="choCard(3)">
        <h4>{{ this.cardList[3].name }}</h4>
      </div>
    </div>
    <div class="item">
      <div class="card" @click="choCard(4)">
        <h4>{{ this.cardList[4].name }}</h4>
      </div>
      <div class="blank"></div>
      <div class="card" @click="choCard(5)">
        <h4>{{ this.cardList[5].name }}</h4>
      </div>
    </div>
    <el-dialog
      title="卡片选择"
      :visible="dialogVisible"
      width="50%"
      :append-to-body="true"
      :before-close="handleClose"
      center
    >
    <div class="change">
      <div class="skin_wrap">
        <h3 style="color:#fff;">选择设备类型:</h3>
        <div
          :class="index == choEquiIndex ? 'active equi_item ' : 'equi_item'"
          v-for="(item, index) in data"
          :key="index"
        >
          <el-card @click.native="choTypeMethod(index,item)">{{
            item.name
          }}</el-card>
        </div>
      </div>
      <div>
        <h3 style="color:#fff;">选择子设备:</h3>
        <!-- <div style="margin-left:20px">
          <span v-for="item in childData" :key="item.index">
            <el-radio v-model="radio2" :label="item.uid"  border>{{item.name}}</el-radio>
          </span>
        </div> -->
        <div class="warnhis_type_flex">
            <div class="warnhis_type_but" v-for="(item,index) in this.childData" :key="index" @click="selectTypelink(item)">
                <div :class="item.active == 1 ? 'warnhis_type_active':'warnhis_type_nomal'">
                    {{item.name}}
                </div>
            </div>
        </div>
      </div>
    </div>
      
      

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCard()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      choCardIndex: 0,
      choEquiIndex: null,
      dialogVisible: false,
      childData:[],
      data:[],
      listData:[],
      radio2:0,
      cardList: (() => {
        var o = {
          type: "",
          name: "",
          index: 0,
          backName: "",
        };
        let arr = [];
        for (let index = 0; index < 6; index++) {
          arr.push(o);
        }
        return arr;
      })(), //从接口拿上来的卡片信息
      data: [],
    };
  },
  created() {
    this.getList();
    this.getLayout();
  },
  methods: {
    //获取当前卡片信息
    getLayout() {
      var params2 = {
          "getlayout":"layout5",
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params2).then((res) => {
        // 旧逻辑
        // this.cardList = JSON.parse(res.data.layout5);
        this.cardList = res.data.layout5;
      })
    },
    // 获取当前设备列表
    getList() {
      var params = {
          "getdevlink":"",
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
          this.list = []
          if(res.data.result == 'ok'){
              var data = res.data.getdevlink
              this.listData = res.data.getdevlink 
              for(var i = 0; i < data.length; i++){
                  var s = 0
                  if(data[i].type != 31 && data[i].type != 32){//屏蔽掉31 32无线网关模块设备
                    for(var y = 0; y < data[i].devlink.length; y++){
                      if(data[i].devlink[y].ready == 1){
                          s++
                      }
                    }
                    if(s > 0){
                      var type = ''
                      if(data[i].type == 1){ //818
                        type = 'CardIrf818'
                      }else if(data[i].type == 2){ //恒湿机（120/120s）
                        type = 'CardHumi'
                      }else if(data[i].type == 3){ //恒湿机（120a）
                        type = 'CardHumiA'
                      }else if(data[i].type == 4){ //霉菌机
                        type = 'CardAirclean'
                      }else if(data[i].type == 5){ //新风机
                        type = 'CardAirfilter'
                      }else if(data[i].type == 6){ //漏水驱鼠云测仪
                        type = 'CardMouse'
                      }else if(data[i].type == 7){ //净化整理台	
                        type = 'CardCleantable'
                      }else if(data[i].type == 8){ //整理台
                        type = 'CardTable'
                      }else if(data[i].type == 9){ //净化柜
                        type = 'CardCleanbox'
                      }else if(data[i].type == 10){ //除酸机
                        type = 'CardDeac'
                      }else if(data[i].type == 11){ //灯光门禁控制器
                        type = 'CardNormal'
                      }else if(data[i].type == 12){ //RFID风淋通道
                        type = 'CardWind'
                      }else if(data[i].type == 13){ //智能排水工作站
                        type = 'CardNormal'
                      }else if(data[i].type == 14){ //消毒舱
                        type = 'CardDisinfect'
                      }else if(data[i].type == 15){ //红外主机
                        type = 'CardNormal'
                      }else if(data[i].type == 16){ //通用模块
                        type = 'CardNormal'
                      }else if(data[i].type == 17){ //云测仪/简版云测仪	17
                        type = 'CardK8s'
                      }else if(data[i].type == 18){ //空调(816)
                        type = 'CardAc'
                      }else if(data[i].type == 19){ //温湿度(T100)
                        type = 'CardTemp'
                      }else if(data[i].type == 20){ //空气监测(K8S)
                        type = 'CardK8s501'
                      }else if(data[i].type == 21){ //空开检测(8路)
                        type = 'CardXtg401'
                      }else if(data[i].type == 24){ //健康洁净机
                        type = 'CardAirlite'
                      }else if(data[i].type == 25){ //数据采集器
                        type = 'CardXtg401'
                      }
                        var arr = {
                            type:type,
                            devlink:data[i].devlink,
                            backName:data[i].type,
                            name:data[i].typename,
                            index:0
                        }
                        this.data.push(arr)
                    }
                  }
                  
              }
          }
      })
      let o = {
        type: "CardWarning",
        name: "报警信息",
        uid: '0',
        addr:1,
        // index:0,
        backName: "warning",
      };
      let f = {
        type: "CardInfrared",
        name: "红外布撤防",
        uid: '0',
        addr:1,
        // index:0,
        backName: "infrared",
      };
      this.data.push(o);
      this.data.push(f);
    },
    choCard(index) {
      this.choCardIndex = index;
      this.dialogVisible = true;
    },
    // 点击具体设备
    selectTypelink(data){
      this.radio2 = data
      // console.log(data)
      for(var a = 0;  a < this.childData.length; a++){
          if(this.childData[a].uid == data.uid && this.childData[a].addr == data.addr && this.childData[a].type == data.type){
              this.childData[a].active = 1
          }else{
              this.childData[a].active = 0
          }
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },
    saveCard() {
      //点击的第几个卡片位置 this.choCardIndex
      // 被选中的哪个设备 this.data[this.choEquiIndex]
      // console.log(this.cardList[this.choCardIndex])
      // console.log(this.radio2)
      if(this.radio2 != 'warning' && this.radio2 != 'infrared'){
        this.cardList[this.choCardIndex] = {
          type: this.radio2.type,
          name: this.radio2.name,
          uid: this.radio2.uid,
          addr:this.radio2.addr,
          backName: this.radio2.backName,
        }
        var arr = {
          number:this.choCardIndex,
          type: this.radio2.type,
          name: this.radio2.name,
          uid: this.radio2.uid,
          addr:this.radio2.addr,
          backName: this.radio2.backName,
        }
        this.cardList[this.choCardIndex] = arr;
      }else{
        if(this.radio2 == 'warning'){
          this.cardList[this.choCardIndex] = {
            type: "CardWarning",
            name: "报警信息",
            uid: '0',
            addr:1,
            backName: "warning",
          };
          var arr = {
            number:this.choCardIndex,
            type: "CardWarning",
            name: "报警信息",
            uid: '0',
            addr:1,
            backName: "warning",
          }
        }else if(this.radio2 == 'infrared'){
          this.cardList[this.choCardIndex] = {
            type: "CardInfrared",
            name: "红外布撤防",
            uid: '0',
            addr:1,
            backName: "infrared",
          };
          var arr = {
            number:this.choCardIndex,
            type: "CardInfrared",
            name: "红外布撤防",
            uid: '0',
            addr:1,
            backName: "infrared",
          }
        }
        
      }
      this.dialogVisible = false;
      // this.cardList[3].name = "云测仪"
      var params = {
          "setlayout":"layout5",
          // 旧逻辑 JSON.stringify(this.cardList)
          "layout":arr,
          [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
      }
      this.$http.post(this.$baseUrl, params).then((res) => {
          this.choEquiIndex = null;
          this.radio2 = 0
          this.getLayout();
        });
      // 解决先选择子设备 直接点击确定bug
      this.childData = []
    },
    choTypeMethod(index,item) {
      this.choEquiIndex = index; //判断选择的data数组中的第几个
      this.childData = []
      if(item.backName != 'warning' && item.backName != 'infrared'){
        for(var i = 0; i < this.listData.length; i++){
          if(item.backName == this.listData[i].type){
            for(var j = 0; j < this.listData[i].devlink.length; j++){
              var arr = {
                type: item.type,
                name: this.listData[i].devlink[j].name,
                uid: this.listData[i].devlink[j].uid,
                addr: this.listData[i].devlink[j].addr,
                // index:j,
                backName: item.backName, 
                active:0
              }
              this.childData.push(arr)
            }
          }
        }
      }else{
        if(item.backName == 'warning'){
          this.radio2 = 'warning'
          this.cardList[this.choCardIndex] = {
            type: "CardWarning",
            name: "报警信息",
            uid: '0',
            addr:1,
            backName: "warning",
          };
        }else if(item.backName == 'infrared'){
          this.radio2 = 'infrared'
          this.cardList[this.choCardIndex] = {
            type: "CardInfrared",
            name: "红外布撤防",
            uid: '0',
            addr:1,
            backName: "infrared",
          };
        }
        
      }
    },
  },
};
</script>

<style scoped>
/* card 顺序选择 */
.cardcho.main {
  background: rgba(89, 129, 165, 0.1);
}
.cardcho .item {
  display: flex;
}

.cardcho .item .card {
  width: 300px;
  border: 1px solid #0b626b;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardcho .item .blank {
  flex: 1;
  height: 300px;
}
.cardcho .item .card h4 {
  /* line-height: 300px; */
  text-align: center;
  font-size: 32px;
}
@keyframes mycolorchange11 {
  0% {
    color: red;
  }
  50% {
    color: #fff;
  }
  100% {
    color: red;
  }
}
@keyframes mycolorchange {
  0% {
    color: #949494;
  }
  50% {
    color: #949494;
  }
  100% {
    color: #949494;
  }
}
@keyframes myscale {
  0% {
    transform: scale(0.5);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0.6;
  }
}

@keyframes myrotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes mycolor {
  0% {
    color: #fff;
  }
  50% {
    color: red;
  }
  100% {
    color: #fff;
  }
}
/deep/ .el-dialog__title {
  color: #fff !important;
}
.change{
  max-height: 550px;
  overflow-y: scroll;
}
.skin_wrap .equi_item {
  display: inline-block;
  padding: 10px 5px;
  cursor: pointer;
}
.skin_wrap .equi_item .el-card {
  border: none;
  background: rgb(132, 159, 191);
  color: #fff;
}
.skin_wrap .active .el-card {
  border: none;
  background: #4e6888;
  color: #fff;
}
@media screen and (max-width: 1024px) {
  .equi_item {
    padding: 0px;
  }
  .equi_item .el-card {
    height: 80px !important;
  }
}
.el-radio.is-bordered {
    color: #fff;
    margin: 10px;
}
.warnhis_type_flex{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.warnhis_type_but{
    margin-right: 20px;
    margin-top: 20px;
    border: 1px solid #ffffff8a;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}
.warnhis_type_nomal{
    height: 50px;
    line-height: 50px;
    padding: 0px 15px;
    background: #36363614;
}
.warnhis_type_active{
    height: 50px;
    line-height: 50px;
    padding: 0px 15px;
    background: #b8e2ff29;
}
</style>